import Card from "@/components/Card"
import SPFX from '@/assets/商品分享.svg'
import HYGH from '@/assets/我的拉新备份 4.svg?react'
import CXHDFX from '@/assets/促销活动分享.svg?react'
import ZBFX from '@/assets/直播分享.svg?react'

function index() {
    return (
        <>
            <div className='flex flex-col gap-[24px] relative pb-[80px] '>
                <div className="w-full text-center h-[128px] bg-white">
                    <h2
                        className="text-[40px] h-[48px] leading-[48px] mt-[56px]"
                        style={{ color: "#000000" }}
                    >
                        营销
                    </h2>
                </div>
                <Card title="商品分享" titleClass="text-[28px]" src={SPFX}>
                    <div className="
                    w-[154px] 
                    h-[197px] 
                    bg-[#FFF6E7]
                    border-1
                    border-[#FFEAC9]
                    text-center
                    pt-[20px]">
                        <p className="text-[26px] laeding-[26px]"
                            style={{ color: "#000000" }}
                        >全部商品</p>
                        <p className="text-[44px] leading-[62px] mt-[4px] mb-[8px]"
                            style={{ color: '#000000' }}
                        >206</p>
                        <div className="
                        w-[110px] 
                        h-[42px] 
                        text-center 
                        ml-[22px] 
                        bg-[rgba(255,255,255,0.80)]
                        border-2
                        border-[rgba(255,115,22,0.40)]"
                            style={{ color: "#FF7316" }}>分享</div>
                    </div>
                    <div className="
                    w-[154px] 
                    h-[197px] 
                    bg-[#F4FCEA]
                    border-1
                    border-[#E7F8D3]
                    text-center
                    pt-[20px]">
                        <p className="text-[26px] laeding-[26px]"
                            style={{ color: "#000000" }}
                        >新品</p>
                        <p className="text-[44px] leading-[62px] mt-[4px] mb-[8px]"
                            style={{ color: '#000000' }}
                        >9</p>
                        <div className="
                        w-[110px] 
                        h-[42px] 
                        text-center 
                        ml-[22px] 
                        bg-[rgba(255,255,255,0.80)]
                        border-2
                        border-[rgba(255,115,22,0.40)]"
                            style={{ color: "#FF7316" }}>分享</div>
                    </div>
                    <div className="
                    w-[154px] 
                    h-[197px] 
                    bg-[#F0FFFE]
                    border-1
                    border-[#E4F6FC]
                    text-center
                    pt-[20px]">
                        <p className="text-[26px] laeding-[26px]"
                            style={{ color: "#000000" }}
                        >畅销品</p>
                        <p className="text-[44px] leading-[62px] mt-[4px] mb-[8px]"
                            style={{ color: '#000000' }}
                        >18</p>
                        <div className="
                        w-[110px] 
                        h-[42px] 
                        text-center 
                        ml-[22px] 
                        bg-[rgba(255,255,255,0.80)]
                        border-2
                        border-[rgba(255,115,22,0.40)]"
                            style={{ color: "#FF7316" }}>分享</div>
                    </div>
                    <div className="
                    w-[154px] 
                    h-[197px] 
                    bg-[rgba(255,61,61,0.08)]
                    border-1
                    border-[#FFDEDE]
                    text-center
                    pt-[20px]">
                        <p className="text-[26px] laeding-[26px]"
                            style={{ color: "#000000" }}
                        >新到货</p>
                        <p className="text-[44px] leading-[62px] mt-[4px] mb-[8px]"
                            style={{ color: '#000000' }}
                        >12</p>
                        <div className="
                        w-[110px] 
                        h-[42px] 
                        text-center 
                        ml-[22px] 
                        bg-[rgba(255,255,255,0.80)]
                        border-2
                        border-[rgba(255,115,22,0.40)]"
                            style={{ color: "#FF7316" }}>分享</div>
                    </div>
                </Card>
                <Card title="会员关怀" Icon={HYGH} >
                    <div className="w-[320px] h-[140px] bg-[#FAFAFA] pl-[20px] pt-[11px]">
                        <p className="text-[28px] h-[40px] mb-[8px] leading-[40px]"
                            style={{ color: '#000000' }}
                        >会员生日关怀</p>
                        <p className="w-[216px] h-[66px] leading-[33px] text-[24px]">
                            为块过生日的会员送上权益以促进复购
                        </p>
                    </div>
                    <div className="w-[320px] h-[140px] bg-[#FAFAFA] pl-[20px] pt-[41px]">
                        <p className="h-[37px] leading-[37px] text-[26px]">正在开放更多关怀场景</p>
                    </div>
                </Card>
                <Card title="促销活动分享" Icon={CXHDFX}>
                    <div className="w-[320px] h-[120px] bg-[#FAFAFA] flex pl-[20px]">
                        <div className="pt-[19px] pr-[40px]">
                            <p className="text-[28px] h-[40px] leading-[40px] mb-[5px]"
                                style={{ color: "#000000" }}
                            >促销活动</p>
                            <p className="text-[26px] h-[37px] leading-[37px]">特价/打折/满减</p>
                        </div>
                        <div className="text-[44px] h-[62px] leading-[62px] pt-[29px]"
                            style={{ color: "#000000" }}
                        >80</div>
                    </div>
                    <div className="w-[320px] h-[120px] bg-[#FAFAFA] flex pl-[20px]">
                        <div className="pt-[19px] pr-[40px]">
                            <p className="text-[28px] h-[40px] leading-[40px] mb-[5px]"
                                style={{ color: "#000000" }}
                            >优惠券</p>
                            <p className="text-[26px] h-[37px] leading-[37px]">代金券/折扣券</p>
                        </div>
                        <div className="text-[44px] h-[62px] leading-[62px] pt-[29px]"
                            style={{ color: "#000000" }}
                        >12</div>
                    </div>
                </Card>
                <Card Icon={ZBFX} title="直播分享"></Card>
            </div >
        </>
    )
}
export default index